<template>
  <!-- 快捷导航 -->
  <div class="all-nav home-nav-tk">
    <!-- <img class="open" @click="closeFn(false)" src="@/assets/indexPage/nav/open.png" /> -->

    <div
      v-show="isCloseFlag"
      class="left-layer-retract-btn base-btn"
      @click="closeFn(false)"
      :style="{
        ...retractStyle,
      }"

    >
      <a-icon type="caret-right" />
    </div>
    <div class="homeNav" :class="isCloseFlag ? 'close-homeNav' : 'open-homeNav'">
      <img class="close" @click="closeFn(true)" src="@/assets/indexPage/nav/del.png" />
      <div class="home-summary">
        <div>
          <span>在建项目<b>(单位：个)</b></span>
          <span class="last-span">{{summaryData.count || 0}}</span>
        </div>
        <div>
          <span>合同额<b>(单位：亿)</b></span>
          <span class="last-span">{{summaryData.amount || 0}}</span>
        </div>
        <div>
          <span>在建面积<b>(单位：万平)</b></span>
          <span class="last-span">{{summaryData.area  || 0}}</span>
        </div>
        <div>
          <span>在建里程<b>(单位：公里)</b></span>
          <span class="last-span">{{summaryData.mileage || 0}}</span>
        </div>
      </div>
      <a-carousel>
        <ul class="nav-ul">
          <li v-for="(item,index) in navData" :key="index" @click="handleManage(item.route)">
            <img :src="item.icon" />
            <p>{{ item.title }}</p>
            </li>
      </ul>
      </a-carousel>
    </div>
  </div>
</template>

<script>
import { Carousel } from 'ant-design-vue'
import { getHomeSum } from '@/api/indexPage'
import Vue from 'vue'
export default {
  data() {
    return {
      isCloseFlag: false,
      summaryData:{

      },
       retractStyle: {
        cursor: 'pointer',
        background: `url("") center center no-repeat`
      },
      navData: [
        {
          title: '总览',
          route: '/bi/overview',
          icon: require('@/assets/indexPage/nav/nav-1.png')
        },
        {
          title: '工程',
          route: '/bi/project',
          icon: require('@/assets/indexPage/nav/nav-2.png')
        },
        {
          title: '设计',
          route: '/bi/design',
          icon: require('@/assets/indexPage/nav/nav-3.png')
        },
        {
          title: '质量',
          route: '/bi/quality',
          icon: require('@/assets/indexPage/nav/nav-4.png')
        },
        {
          title: '安监',
          route: '/bi/safety',
          icon: require('@/assets/indexPage/nav/nav-5.png')
        },
        {
          title: '物资',
          route: '/bi/materials',
          icon: require('@/assets/indexPage/nav/nav-6.png')
        },
        {
          title: '采购',
          route: '/bi/procurement',
          icon: require('@/assets/indexPage/nav/nav-7.png')
        },
        {
          title: '商务',
          route: '/bi/business',
          icon: require('@/assets/indexPage/nav/nav-8.png')
        },
        {
          title: '技术',
          route: '/bi/technology',
          icon: require('@/assets/indexPage/nav/nav-9.png')
        },
        {
          title: '科技',
          route: '/bi/science',
          icon: require('@/assets/indexPage/nav/nav-10.png')
        },
        {
          title: '法务',
          route: '/bi/legal',
          icon: require('@/assets/indexPage/nav/nav-11.png')
        },
        {
          title: '信息中心',
          route: '/bi/informationCenter',
          icon: require('@/assets/indexPage/nav/nav-12.png')
        }
      ]
    }
  },
  components: {
    Carousel
  },
 async mounted() {
   await this.getHomeSumFn();
  },
  methods: {
   async getHomeSumFn(){
      let data = await getHomeSum();
      if(data.code == 0){
          this.summaryData = data.data;
          this.summaryData.area = data.data.area.toLocaleString();
      }else{

      }
    },
    closeFn(flag) {
      this.isCloseFlag = flag
    },
    handleManage(key) {
      if (key) {
        if(key === '/bi/overview'){
          // 和/views/bi/overview总览页面配置保持一致
          const hostUrl = 'https://dashboard.cscecxn.com:8443/'
          const src = 'bigscreenv3/viewer/0a2c3854-013c-41da-9524-5c4cf974e0a2'
          const preToken = '?code'
          window.open(`${hostUrl + src + preToken}=${Vue.getAcloudProvider().getAccessToken()}&fgs=${this.$store.state.user.fgs}`, '_blank')
        }else{
          this.$router.push({
            path: `${key}`
          })
        }
      }
    }
  }
}
</script>
<style lang="less" scoped>
.left-layer-retract-btn {
  width: 10px;
  height: 58px;
  position: absolute;
  left: -1px;
  top: 22px;
  z-index: 9;
  cursor: pointer;
  transform: translateY(-50%);
  transition: 0.3s ease;
  font-size: 16px;
  overflow: hidden;

  .anticon {
    background-color: #f7f7f7;
    position: absolute;
    top: 50%;
    margin-top: -7px;
    left: -3px;
    font-size: 14px;
  }
}
.all-nav {
  position: absolute;
  height: calc(100% - 36px);
  z-index: 1;
  left: 20px;
  top: 20px;
  .open {
      position: absolute;
      left: 6px;
      top:5px;
      z-index: 9;
      cursor: pointer;
  }
  .homeNav {
    transition: all 0.3s;
    height: calc(60% - 14px);
    background-color: #fff;
    opacity: 0.4;
    transition: opacity 0.5s ease;
    &:hover{
      opacity: 1;
    }
    &.close-homeNav {
      margin-left: -400px;
    }
    &.open-homeNav{
      margin-left: 0;
    }
    position: relative;
    width: 360px;
    .close {
      position: absolute;
      right: 0;
      top: -6px;
      cursor: pointer;
      z-index: 12;
    }
    position: absolute;
    z-index: 10;
    // height: 436px;
    box-shadow: 3px 2px 20px #ebebeb;
    padding: 16px;
    .home-summary {
      & > div {
        height: 36px;
        padding: 0 10px;
        line-height: 36px;
        display: flex;
        justify-content: space-between;
        background-color: #fff;
        border-radius: 3px;
        margin-bottom: 5px;
        box-shadow: 1px 1px 1px #f7fafb, 1px -1px 1px #f7fafb, -1px 1px 1px #f7fafb, -1px -1px 1px #f7fafb;
        &:last-child {
          border: none;
          margin-bottom: 0;
        }
        & > span {
          color: #333;
          font-size: 16px;
          b {
            font-size: 12px;
            color: #bdbdbd;
            font-weight: normal;
            margin-left: 10px;
          }
          &.last-span {
            font-size: 18px;
          }
        }
      }
    }
    .nav-ul {
      display: flex !important;
      flex-wrap: wrap;
      padding: 0;
      justify-content: center;
      align-content: center;
      margin-top: 26px;
      li {
        width: 25%;
        img{
          width: 40px;
          height: 40px;
        }
        cursor: pointer;
        text-align: center;
        img {
          display: inline-block;
        }
        p {
          font-size: 14px;
          color: #333;
          margin-top: 6px;
        }
      }
    }
  }
}
@media screen and (min-width: 1200px) and (max-width: 1450px) {
  .all-nav{
    .left-layer-retract-btn{
          left: -9px;
          top: 12px;
      }
    .homeNav{
      height:60%;
      left: -10px;
      top:-10px;
      .nav-ul{
        margin-top: 20px;
      }
    }
  }
}
</style>
